<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="header">
      <text class="title-text">选择词库</text>
      <view class="divider"></view>
    </view>

    <!-- 词库列表 -->
    <view class="grid-container">
      <view 
        v-for="(item, index) in value" 
        :key="item._id"
        class="card-item"
        :class="{'card-active': activeIndex === index}"
        @touchstart="handleTouchStart(index)"
        @touchend="handleTouchEnd"
        @click="goto(index + 1, item.url)"
      >
        <view class="card-image">
          <image 
            :src="item.url" 
            mode="a"
            @load="handleImageLoad(item)"
            @error="handleImageError(item)"
            :class="{'image-loaded': item.loaded}"
          />
          <view v-if="!item.loaded" class="skeleton-box">
            <uni-load-more status="loading" color="#4CAF50" />
          </view>
        </view>
        <view class="card-content">
          <text class="book-title">{{item.name}}</text>
          <view class="meta-info">
            <uni-icons type="star-filled" size="16" color="#FFC107" />
            <text class="word-count">{{item.wordCount}}词</text>
            <uni-tag text="N3" size="small" type="success" />
          </view>
          <text class="book-description">{{item.xm}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const img = uniCloud.importObject("JLTP-get-img")
const value = ref([])
const activeIndex = ref(-1)
const qqq = uni.getStorageSync('key');
const www = uni.getStorageSync('id');

// 图片加载处理
const handleImageLoad = (item) => {
  item.loaded = true
  item.error = false
}

// 图片错误处理
const handleImageError = (item) => {
  console.error('图片加载失败:', item.url)
  item.loaded = false
  item.error = true
  item.url = '/static/default-book.png' // 替换默认图片
  setTimeout(() => item.loaded = true, 300)
}

// URL编码过滤器
const encodeUrl = (url) => {
  return encodeURI(url)
}

// 触摸效果
const handleTouchStart = (index) => {
  activeIndex.value = index
}

const handleTouchEnd = () => {
  activeIndex.value = -1
}

// 跳转处理
function goto(e) {
  if (qqq || www) {
    uni.showModal({
      title: "换单词本会导致之前的数据记录清空",
      success: (r) => {
        if (r.confirm) {
          uni.clearStorageSync();
          uni.reLaunch({
            url: `/pages/index/index?id=${e}`
          });
        }
      }
    })
  } else {
    uni.reLaunch({
      url: `/pages/index/index?id=${e}`
    });
  }
}

// 数据获取
const suju = async () => {
  try {
    let res = await img.get()
    value.value = res.data.map(item => ({
      ...item,
      loaded: false,
      error: false
    }))
    console.log('数据加载成功:', value.value)
  } catch (e) {
    console.error('数据获取失败:', e)
    uni.showToast({
      title: '数据加载失败',
      icon: 'none'
    })
  }
}

suju()
</script>

<style lang="scss" scoped>
$primary-color: #4CAF50;
$shadow-default: 0 4rpx 16rpx rgba(0,0,0,0.1);

.container {
  background: linear-gradient(135deg, #F8F9FA 0%, #E8F5E9 100%);
  padding: 40rpx 24rpx;
}

.header {
  margin-bottom: 60rpx;
  .title-text {
    font-size: 44rpx;
    font-weight: 600;
    color: #2D3436;
    letter-spacing: 1rpx;
  }
  .divider {
    height: 4rpx;
    width: 80rpx;
    background: $primary-color;
    margin-top: 16rpx;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
}

.card-item {
  background: #FFF;
  border-radius: 24rpx;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: $shadow-default;

  &.card-active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
  }

  .card-image {
    position: relative;
    height: 240rpx;
    background: #F5F6FA;

    image {
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s ease;

      &.image-loaded {
        opacity: 1;
      }
    }

    .skeleton-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f6fa;
    }
  }

  .card-content {
    padding: 24rpx;
    
    .book-title {
      font-size: 34rpx;
      font-weight: 500;
      color: #2D3436;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .meta-info {
      display: flex;
      align-items: center;
      gap: 16rpx;
      margin: 16rpx 0;

      .word-count {
        font-size: 24rpx;
        color: #636E72;
      }
    }

    .book-description {
      font-size: 28rpx;
      color: #636E72;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style>